<template>
	<el-container>
		<el-header :height="headerHeight" style="display:block" >
			<el-row :gutter="20" id="operation" v-auth="['settingMenu:add']">
				<el-col :span="24">
					<el-button v-auth="['settingMenu:add']"  type="primary" plain icon="el-icon-plus" size="small" @click="add">新增</el-button>
				</el-col>
			</el-row>
		</el-header>

		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" :hideImport="true" :hideExport="true" style="width: 100%" row-key="permissionId" :tree-props="treeProps"
					 hidePagination="true">
				<el-table-column prop="permissionId" label="资源ID" width="220" align="left"/>
				<el-table-column prop="name" label="资源名称" width="160"/>
				<el-table-column prop="description" label="说明/描述" width="180"/>
				<el-table-column prop="type" label="资源类型" width="120" align="center">
					<template #default="scope">
						<!-- 1：菜单    2：Iframe    3：外链    4：按钮 -->
						<el-tag v-if="scope.row.type==1" class="ml-2" type="primary">菜单</el-tag>
						<el-tag v-else-if="scope.row.type==2" class="ml-2" type="warning">内联</el-tag>
						<el-tag v-else-if="scope.row.type==3" class="ml-2" type="danger">外链</el-tag>
						<el-tag v-else-if="scope.row.type==4" class="ml-2" type="success">按钮</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="affix" label="固定tab栏" width="190" align="center">
					<template #default="scope">
						<!-- 是否固定菜单到tab栏上,type为菜单类型时生效  0: 否  1: 是 -->
						<el-tag v-if="scope.row.affix==0" class="ml-2" type="info">否</el-tag>
						<el-tag v-else-if="scope.row.affix==1" class="ml-2" type="success">是</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="component" label="视图" width="150"/>
				<el-table-column prop="perms" label="组件/权限名称" width="150"/>
				<el-table-column prop="url" label="访问链接" width="300"/>
				<el-table-column prop="icon" label="图标" width="140" align="center">
					<template #default="scope">
						<el-icon><component :is="scope.row.icon" style="position: relative;top: 2px;"/></el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="orderNum" label="排序" width="180" align="center"/>
				<el-table-column prop="createTime" label="创建时间" width="180"/>
				<el-table-column prop="updateTime" label="更新时间" width="180"/>

				<el-table-column label="操作" fixed="right" align="center"
								 :width="this.$TOOL.auth.setTableOperationWidth(['settingMenu:add','settingMenu:update','settingMenu:delete'])"
								 v-if="this.$TOOL.auth.verification(['settingMenu:add','settingMenu:update','settingMenu:delete'])" >
					<template #default="scope">
						<el-button v-auth="['settingMenu:add']" plain type="success" size="small" :disabled="scope.row.type != 1"
								   :title="scope.row.type != 1 ? '只能对菜单类型的资源新增子级资源' : ''"
								   @click="add(scope.row)">新增
						</el-button>
						<el-button v-auth="['settingMenu:update']" plain type="primary" size="small" @click="table_edit(scope.row, scope.$index)">
							编辑
						</el-button>
						<el-button v-auth="['settingMenu:delete']" v-if="scope.row.permissionList.length == 0" plain type="danger" size="small" @click="table_del(scope.row)">删除</el-button>
						<el-button v-auth="['settingMenu:delete']" v-else title="当前资源存在子级资源，无法删除" disabled plain type="danger" size="small" @click="table_del(scope.row)">删除</el-button>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="upsearch" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './save'

export default {
	name: 'settingMenu',
	components: {
		saveDialog
	},
	data() {
		return {
			headerHeight: "45px",
			dialog: {
				save: false,
			},
			menuOptionsDataList: [],
			treeProps: {children: "permissionList"},
			apiObj: this.$API.system.permission.list,
		}
	},
	watch: {},
	created() {
		window.onresize = () => {
			return (() => {
				// 监听浏览器宽高变化
				this.headerHeight = this.$TOOL.page.updateHeight();
			})()
		}
	},
	mounted() {
		// 菜单页面中 <el-header :height="headerHeight">...</el-header> 头部查询条件和新增编辑按钮区域高度
		this.headerHeight = this.$TOOL.page.updateHeight();
		this.getInitData();
	},
	methods: {

		/**
		 * 加载初始化数据
		 * @returns {Promise<void>}
		 */
		async getInitData() {
			let menuData = await this.$API.system.permission.listAll.get();
			this.menuOptionsDataList = [{
				"permissionId": "0",
				"name": "顶级菜单",
				"permissionList": menuData.data
			}];
		},

		/**
		 * 搜索
		 */
		async upsearch() {
			this.$refs.table.upData(this.search)
		},

		/**
		 * 添加
		 */
		async add(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				if(row.permissionId != undefined){
					this.$refs.saveDialog.open().initAdditionalData(this.menuOptionsDataList).setData(
						{
							permissionId: "",
							name: "未命名",
							description: "",
							url: "",
							perms: "",
							parentId: row.permissionId,
							component: "",
							affix: 0,
							type: 1,
							orderNum: 1,
							icon: "",
							status: 1,
							apiList: []
						});
				}else {
					this.$refs.saveDialog.open().initAdditionalData(this.menuOptionsDataList).setData({
						permissionId: "",
						name: "未命名",
						description: "",
						url: "",
						perms: "",
						parentId: "0",
						component: "",
						affix: 0,
						type: 1,
						orderNum: 1,
						icon: "",
						status: 1,
						apiList: []
					});
				}

			})
		},

		/**
		 * 编辑
		 * @param row
		 */
		async table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').initAdditionalData(this.menuOptionsDataList).setData(row)
			})
		},

		/**
		 * 删除
		 * @param row
		 * @param index
		 * @returns {Promise<void>}
		 */
		async table_del(row) {
			let reqData = {permissionId: row.permissionId}
			this.$confirm(`确定删除 ${row.name} 资源吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let res = await this.$API.system.permission.del.delete(reqData);
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

	}
}
</script>

<style>
</style>
